import 'dart:async';

import 'package:enjoy_plus_hm/utils/toast.dart';
import 'package:enjoy_plus_hm/utils/token.dart';
import 'package:flutter/material.dart';

import '../../utils/eventBus.dart';
import '../../utils/http.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // 1.获取短信验证码倒计时
  int _countdown = 60;
  // 是否倒计时
  bool _isCountingDown = false;
  // 定时器
  Timer? _timer;

  // 2.定义两个控制器用于获取输入框中的值
  final TextEditingController _phoneController = TextEditingController();
  final TextEditingController _codeController = TextEditingController();

  // 启动倒计时
  void _startCountdown() {
    // 倒计时中，不允许再次点击
    if (_isCountingDown) {
      return;
    }
    // 设置开启倒计时
    _isCountingDown = true;
    // 启动定时器
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      // 更新倒计时
      setState(() {
        if (_countdown > 0) {
          _countdown--;
        } else {
          _isCountingDown = false;
          _countdown = 60;
          _timer?.cancel();
        }
      });
    });
  }

// 3.获取短信验证码
  Future<void> _getCode() async {
    // 3.1 获取输入框中的值
    String phone = _phoneController.text;
    // 3.2 验证手机号格式
    if (phone.isEmpty) {
      return ToastUtil.showError("请输入手机号");
    }
    RegExp reg = RegExp(r'^1[3-9]\d{9}$');
    if (!reg.hasMatch(phone)) {
      return ToastUtil.showError("手机号格式错误");
    }

    // 3.3 发送短信验证码
    var res = await MyHttp.get("/code", params: {"mobile": phone});
    print(res);
    if (res['code'] != 10000) {
      return ToastUtil.showError('获取验证码失败');
    }
    ToastUtil.showSuccess('验证码已发送');
    // 3.4 倒计时开始
    _startCountdown();
    // 3.5 把验证码回显到验证码输入框中
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _codeController.text = res['data']['code'];
      });
    });
  }

// 4.登录
  void _login() async {
    // 4.1 获取输入框数据
    String phone = _phoneController.text;
    String code = _codeController.text;
    // 4.2 对手机号进行非空效验
    if (phone.isEmpty) {
      return ToastUtil.showError("请输入手机号");
    }
    RegExp reg = RegExp(r'^1[3-9]\d{9}$');
    if (!reg.hasMatch(phone)) {
      return ToastUtil.showError("手机号格式错误");
    }
    // 4.3 对验证码进行非空效验
    if (code.isEmpty) {
      return ToastUtil.showError("请输入验证码");
    }
    RegExp reg1 = RegExp(r'^\d{6}$');
    if (!reg1.hasMatch(code)) {
      return ToastUtil.showError("验证码格式错误");
    }
    // 4.4 登录并保存token
    var res = await MyHttp.post("/login", {
      "mobile": phone,
      "code": code,
    });
    if (res['code'] != 10000) {
      return ToastUtil.showError('登录失败');
    }
    ToastUtil.showSuccess('登录成功$res');
    // 4.5 保存token
    await TokenManager().saveToken(res['data']['token']);
    // 4.6 清除定时器
    _timer?.cancel();
    // 如果发请求没有token或者token失效, 登录成功回到页面后要重新加载数据
    // 4.7 登录成功，触发《刷新我的页面》的事件
    eventBus.fire(RefreshMine());
    // 4.7 登录成功，跳转到上一页
    Navigator.pop(context);
  }

// 当页面失去焦点时调用，取消定时器避免内存泄漏
  @override
  void deactivate() {
    super.deactivate();
    _timer?.cancel();
  }

// 销毁控制器
  @override
  void dispose() {
    // 销毁控制器
    _phoneController.dispose();
    _codeController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('登录'),
          backgroundColor: Colors.transparent,
          centerTitle: true,
        ),
        body: Container(
            padding: const EdgeInsets.all(20),
            child:
                Column(mainAxisAlignment: MainAxisAlignment.start, children: [
              const Row(
                children: [
                  Text('登录',
                      style:
                          TextStyle(fontSize: 25, fontWeight: FontWeight.bold))
                ],
              ),
              const SizedBox(height: 10),
              const Row(
                children: [
                  Text('加入享+, 让生活更轻松', style: TextStyle(fontSize: 15))
                ],
              ),
              const SizedBox(height: 30),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    // 设置TextField的装饰属性
                    child: TextField(
                      // 绑定控制器
                      controller: _phoneController,
                      //键盘样式
                      keyboardType: TextInputType.phone,
                      // 最大长度
                      maxLength: 11,
                      decoration: InputDecoration(
                        // 定义标签文本，提示用户输入手机号
                        labelText: '手机号',
                        // 定义输入框内的提示文本
                        hintText: '请输入手机号',
                      ),
                    ),
                  ),
                  // 获取验证码按钮
                  /// 创建一个自定义样式的 ElevatedButton 按钮组件
                  /// 该按钮使用 ElevatedButton.styleFrom 方法配置视觉样式，
                  /// 包括背景色、阴影色、前景色和最小尺寸等属性。
                  /// [style] - 按钮的样式配置，通过 ElevatedButton.styleFrom 设置
                  /// [backgroundColor] - 按钮背景颜色，设置为白色
                  /// [shadowColor] - 按钮阴影颜色，设置为透明
                  /// [foregroundColor] - 按钮前景颜色（文字颜色），使用 ARGB 格式定义
                  /// [minimumSize] - 按钮最小尺寸，宽度100，高度50
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      shadowColor: Colors.transparent,
                      foregroundColor: const Color.fromARGB(255, 85, 145, 175),
                      minimumSize: const Size(100, 50),
                    ),
                    onPressed: () {
                      // 启动倒计时
                      _getCode();
                    },
                    child: _isCountingDown
                        ? Text(
                            '$_countdown秒后重新获取',
                            style: TextStyle(color: Colors.grey),
                          )
                        : Text('获取验证码'),
                  ),
                ],
              ),
              const SizedBox(height: 8),
              // 验证码输入框
              TextField(
                //键盘样式
                keyboardType: TextInputType.number,
                // 最大长度
                maxLength: 6,
                // 绑定控制器
                controller: _codeController,
                decoration: InputDecoration(
                  labelText: '验证码',
                  hintText: '请输入6位验证码',
                ),
              ),
              const SizedBox(height: 8),
              const Row(children: [
                Text('未注册手机号经验证后将自动登录',
                    style: TextStyle(fontSize: 12, color: Colors.grey)),
              ]),
              const SizedBox(height: 50),
              // 登录按钮
              Row(children: [
                Expanded(
                    child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color.fromARGB(255, 85, 145, 175),
                    minimumSize: const Size(100, 50),
                  ),
                  onPressed: () {
                    // 登录
                    _login();
                  },
                  child: const Text('登录',
                      style: TextStyle(color: Colors.white, fontSize: 20)),
                ))
              ])
            ])));
  }
}
